<template>
  <div>
    <a-checkbox-group
      class="ssociated-chart-selection"
      :value="innerValue"
      :name="name"
      @change="onChange"
    >
      <a-checkbox
        v-for="(op, i) in options"
        :key="i"
        class="as-check-item"
        :checked="(value || []).includes(op.value)"
        :disabled="op.disabled"
        :value="op.value"
        >{{
          [null, undefined, ''].includes(op.label)
            ? `未命名（widgetId:${op.value}）`
            : op.label
        }}
        <a-tooltip
          v-if="op.showHander"
          placement="top"
          title="当前图表无法设置联动，请检查其数据表内容"
        >
          <a-icon class="info-hander" type="info-circle" />
        </a-tooltip>
      </a-checkbox>
    </a-checkbox-group>
  </div>
</template>
<script lang="ts">
import { Vue, Prop, Component, Watch } from 'vue-property-decorator'

@Component({})
export default class AssociatedChartSelection extends Vue {
  @Prop({ default: () => [] })
  value!: any[]

  @Prop({ default: () => '' })
  name!: string

  @Prop({ default: () => [] })
  options!: any[]

  /** 内部绑定数据 */
  innerValue: any[] = []

  @Watch('value', { immediate: true })
  getValue(newValue: any[]) {
    this.innerValue = newValue
    return newValue
  }

  onChange(value: any[]) {
    this.$emit('input', value)
    this.$emit('change', value)
  }
}
</script>
<style lang="less" scoped>
.ssociated-chart-selection {
  height: 20px;
  width: 100%;

  .info-hander {
    color: #5d637e;
    cursor: pointer;
    font-size: 12px;
  }

  .as-check-item {
    display: block;
    margin-left: 0;
    width: 100%;
  }

  .as-check-item + .as-check-item {
    margin-top: 4px;
  }
}
</style>
